<template>
	<div>
		
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
		    <span>公告管理</span>
		    <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">发布公告</el-button>
		  </div>
		  <div>
		    <el-collapse v-model="activeNames" @change="handleChange" 
						 v-loading="loading"
                         element-loading-text="正在加载..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)">
		      <el-collapse-item v-for="notice in noticeList" >
				  <template slot="title" >
					  <span><el-tag type="success">{{notice.createDate}}</el-tag></span>&nbsp;&nbsp;
					  <span style="width: 500px;">{{notice.title}}</span>
					  </el-row>
				  </template>
		        <div>
					<el-card class="box-card-child">
					  
					  <div class="text item">
					    {{notice.message}}
					  </div>
					  <div>
					    <el-button type="primary" icon="el-icon-edit" circle></el-button>
					    <el-button type="danger"  @click="del(notice.id)" icon="el-icon-delete" circle></el-button>
					  </div>
					</el-card>
				</div>
		      </el-collapse-item>
		    </el-collapse>
		  </div>
		</el-card>
		
		<!-- 对话框 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="50%"
		  :before-close="handleClose">
		  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="标题" prop="title">
		      <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="内容" prop="message">
		      <el-input type="textarea"  cols="30" rows="10" v-model="ruleForm.message" autocomplete="off"></el-input>
		    </el-form-item >
		    <el-form-item>
		      <el-button type="primary" @click="add('ruleForm')">发布</el-button>
		      <el-button @click="resetForm('ruleForm')">重置</el-button>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
	
	export default {
	    data() {
	      return {
			dialogVisible: false,
			loading: false,
			ruleForm: {
			  id: '',
			  title: '',
			  message: '',
			  createDate: ''
			},
			rules: {
				 title: [
				   { required: true, message: '请输入标题', trigger: 'blur' }
				 ],
				 message: [
				   { required: true, message: '请输入内容', trigger: 'blur' }
				 ]
			},
			pickerOptions: {
				shortcuts: [{
				text: '最近一周',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				  picker.$emit('pick', [start, end]);
				}
				}, {
				text: '最近一个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				  picker.$emit('pick', [start, end]);
				}
				}, {
				text: '最近三个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				  picker.$emit('pick', [start, end]);
				}
				}]
			},
			activeNames: [],
				noticeList: [],
				keyword:'',
				time:[],
				pageSize: 10,
				pageNum: 1
	      };
	    },
	    methods: {
	      handleChange(val) {
	        console.log(val);
	      },
		  handleClose(done) {
			  this.$confirm('确认关闭？')
				.then(_ => {
				  done();
				})
				.catch(_ => {});
		  },
		  initNotice(){
			  this.loading = true;
			  let startTime = '';
			  let endTime = '';
			  if(this.time.length == 2){
			  	startTime = this.Time[0];
			  	endTime = this.Time[1];
			  }
			  this.getRequest("/system/public/",{
			  	startTime: startTime,
			  	endTime: endTime,
				title: this.keyword,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			  }).then(data =>{
			  	this.loading = false;
			  	this.noticeList = data.list;
			  }).catch(err=>{
			  	this.loading = false;
			  })
		  },
		  del(id){
			  this.loading = true;
			  this.deleteRequest("/system/public/"+id).then(res =>{
				  this.loading = false;
				  this.initNotice();
			  })
		  },
		  update(){
			  
		  },
		  resetForm(formName) {
			  this.$refs[formName].resetFields();
		  },
		  add(formName){
			  this.$refs[formName].validate((valid) => {
				if (valid) {
				  this.postRequest("/system/public/add",this.ruleForm).then(res=>{
					  this.dialogVisible = false;
					  this.initNotice();
				  })
				} else {
				  console.log('error submit!!');
				  return false;
				}
			  });
		  }
	    },
		mounted() {
			this.initNotice();
		}
	  }
</script>

<style>
	 .text {
	    font-size: 14px;
	  }
	
	  .item {
	    margin-bottom: 18px;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	    display: table;
	    content: "";
	  }
	  .clearfix:after {
	    clear: both
	  }
	
	  .box-card {
	    width: 880px;
	  }
	  
	  .box-card-child {
	    width: 800px;
	  }
</style>
